import * as THREE from 'three'
import { stats } from '../stats'
import { gui } from '../gui'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { FontLoader, Font } from 'three/examples/jsm/loaders/FontLoader'
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'

function createCourse20 (dom: HTMLElement) {
  const scene = new THREE.Scene()
  scene.background = new THREE.Color(0x000000)

  const camera = new THREE.PerspectiveCamera(75, dom.offsetWidth / dom.offsetHeight, 0.1, 1000)
  camera.position.set(0, 200, 700)

  const render = new THREE.WebGLRenderer()
  render.setClearColor(new THREE.Color(0x000000))
  render.setSize(dom.offsetWidth, dom.offsetHeight)
  render.shadowMap.enabled = true

  dom.appendChild(render.domElement)

  const axes = new THREE.AxesHelper(100)
  scene.add(axes)

  const controls = new OrbitControls(camera, render.domElement)
  controls.update()

  render.setAnimationLoop(anmation)

  function anmation () {
    stats.update()
    render.render(scene, camera)
  }

  const dirLightBeh = new THREE.DirectionalLight(0xffffff, 1.25)
  dirLightBeh.position.set(0, 100, -90)
  scene.add(dirLightBeh)

  const dirLightFro = new THREE.DirectionalLight(0xffffff, 1.5)
  dirLightFro.position.set(0, 100, 90)
  scene.add(dirLightFro)

  const loader = new FontLoader()
  let gFont: Font
  let textMesh: THREE.Mesh
  loader.load('https://dongli-three.oss-cn-shanghai.aliyuncs.com/FZYaoTi_Regular.json', function (font) {
    gFont = font
    const geometry = new TextGeometry('动力IT实训', {
      font,
      size: 80,
      height: 20,
      curveSegments: 4,
      bevelEnabled: true,
      bevelThickness: 2,
      bevelSize: 1.5,
      bevelSegments: 4
    })
    const materials = [
      new THREE.MeshPhongMaterial({ color: 0xffffff, flatShading: true }),
      new THREE.MeshPhongMaterial({ color: 0xffffff })
    ]

    textMesh = new THREE.Mesh(geometry, materials)
    textMesh.position.set(-270, 0, 0)
    scene.add(textMesh)
  })

  const ctrlObj = {
    size: 80,
    height: 20,
    curveSegments: 4,
    bevelEnabled: true,
    bevelThickness: 2,
    bevelSize: 1.5,
    bevelSegments: 4
  }

  const ctrl = gui
  ctrl.add(ctrlObj, 'size', 0, 100).onChange(function (e: number) {
    createText()
  })

  ctrl.add(ctrlObj, 'height', 0, 100).onChange(function (e: number) {
    createText()
  })

  ctrl.add(ctrlObj, 'curveSegments', 1, 3).step(1).onChange(function (e: number) {
    createText()
  })

  ctrl.add(ctrlObj, 'bevelEnabled').onChange(function (e: number) {
    createText()
  })

  ctrl.add(ctrlObj, 'bevelThickness', 0, 100).onChange(function (e: number) {
    createText()
  })

  ctrl.add(ctrlObj, 'bevelSize', 0, 100).onChange(function (e: number) {
    createText()
  })

  ctrl.add(ctrlObj, 'bevelSegments', 0, 100).step(1).onChange(function (e: number) {
    createText()
  })

  window.addEventListener('resize', onWindowResize, false)

  function onWindowResize () {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    render.setSize(window.innerWidth, window.innerHeight)
  }

  function createText () {
    scene.remove(textMesh)

    const geometry = new TextGeometry('动力IT实训', {
      font: gFont,
      size: ctrlObj.size,
      height: ctrlObj.height,
      curveSegments: ctrlObj.curveSegments,
      bevelEnabled: ctrlObj.bevelEnabled,
      bevelThickness: ctrlObj.bevelThickness,
      bevelSize: ctrlObj.bevelSize,
      bevelSegments: ctrlObj.bevelSegments
    })
    const materials = [
      new THREE.MeshPhongMaterial({ color: 0xffffff, flatShading: true }),
      new THREE.MeshPhongMaterial({ color: 0xffffff })
    ]

    textMesh = new THREE.Mesh(geometry, materials)
    textMesh.position.set(-270, 0, 0)
    scene.add(textMesh)
  }
  return { camera, scene, render }
}

export {
  createCourse20
}
